import React, { useState } from 'react'
import { Button, Layout, theme } from 'antd'

import Sidebar from './components/Sidebar'
import AppMain from './components/AppMain'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons'
import NavBar from './components/NavBar'
const { Sider, Header, Content, Footer } = Layout

export default function MyLayout() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Layout className="min-h-[100vh]">
      <Sider
        className="fixed top-0 left-0 h-[100hv] overflow-y-auto"
        theme="light"
        trigger={null}
        collapsible
        collapsed={collapsed}
      >
        <Sidebar></Sidebar>
      </Sider>
      <Layout className="overflow-y-auto">
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <NavBar collapsed={collapsed} setCollapsed={setCollapsed}></NavBar>
        </Header>
        <Content
          style={{
            margin: '24px 16px 0',
          }}
        >
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <AppMain></AppMain>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}
